<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<title>澜悦顾问单</title>
</head>

<body>
    <div id="box" style="font-size:22px">


<table width="1200" border="1" cellspacing="0" cellpadding="0">
  <caption>
      <h2>澜悦顾问单</h2>

  </caption>
  <tr>
    <th scope="col">订单编号</th>
    <th scope="col">{{sn}}</th>
    <th scope="col">会员</th>
    <th scope="col">{{user}}</th>
    <th scope="col">房间</th>
    <th scope="col">{{room}}</th>
    <th scope="col">日期</th>
    <th scope="col">{{date}}</th>
  </tr>
  <tr>
    <td>皮肤现状</td>
    <td colspan="7">{{form.skin_text}}</td>
  </tr>
  <tr>
    <td>需要解决的问题</td>
    <td colspan="7">{{form.problem}}</td>
  </tr>
  <tr>
    <td>操作注意细节</td>
    <td colspan="7">{{form.operate_detail}}</td>
  </tr>
  <tr>
    <td>建议居家用品</td>
    <td colspan="7">{{form.sug_goods}}</td>
  </tr>
</table>
<br>
<table width="1200" border="1" cellspacing="0" cellpadding="0">
  <caption>
    项目
  </caption>
  <tr>
    <th scope="col">项目名称</th>
    <th scope="col">数量</th>
    <th scope="col">金额</th>
    <th scope="col">顾问</th>
    <th scope="col">美容师</th>
    <th scope="col">备注</th>
    <th scope="col">结算方式</th>
  </tr>
  <tr  v-for="item,index in tableData">
    <td>{{item.project_name}}</td>
    <td>{{item.num}}</td>
    <td>{{item.price}}</td>
    <td>{{item.adviser_id}}</td>
    <td>{{item.technician_ids}}</td>
    <td>{{item.bak}}</td>
    <td>{{item.settlement}}</td>
  </tr>

</table>
<br>
<table width="1200" border="1" cellspacing="0" cellpadding="0">
  <caption>
    产品
  </caption>
  <tr>
    <th scope="col">产品名称</th>
    <th scope="col">数量</th>
    <th scope="col">金额</th>
    <th scope="col">顾问</th>
    <th scope="col">美容师</th>
    <th scope="col">备注</th>
    <th scope="col">结算方式</th>
    <th scope="col">是否寄存</th>
    <th scope="col">仓库</th>
  </tr>
  <tr v-for="item,index in productData">
    <td>{{item.name}}</td>
    <td>{{item.num}}</td>
    <td>{{item.price2}}</td>
    <td>{{item.adviser_id}}</td>
    <td>{{item.technician_ids}}</td>
    <td>{{item.bak}}</td>
    <td>{{item.settlement}}</td>
    <td><span v-if="item.is_deposit == 1">带走</span>
    <span v-if="item.is_deposit == 2">寄存</span></td>
    <td><span v-for="i,idx in warehouses"  :value="i.id" v-if="item.warehouse_id == i.id">{{i.name}}</span></td>
  </tr>

</table>
<br>
<table width="1200" border="1" cellspacing="0" cellpadding="0">
  <caption>
    会员卡充值
  </caption>
  <tr>
    <th scope="col">充值金额</th>
    <th scope="col"> {{form.recharge.price}}</th>
    <th scope="col">赠送金额</th>
    <th scope="col">{{form.recharge.price2}}</th>
  </tr>
</table>
<br>
<table width="1200" border="1" cellspacing="0" cellpadding="0">
  <caption>
    疗程卡充值
  </caption>
  <tr>
    <th scope="col">卡名</th>
    <th scope="col">金额</th>
    <th scope="col">顾问</th>
    <th scope="col">美容师</th>
    <th scope="col">结算方式</th>
    <th scope="col">备注</th>
  </tr>
  <tr v-for="item,index in cardData">
    <td>{{item.name}}</td>
    <td>{{item.price}}</td>
    <td>{{item.adviser_id}}</td>
    <td>{{item.technician_ids}}</td>
    <td>{{item.settlement}}</td>
    <td>{{item.bak}}</td>
  </tr>

</table>
<br>
<table width="1200" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col">总金额</th>
    <th scope="col">{{form.zong_price}}</th>
    <th scope="col">收款账户</th>
    <th scope="col" style="width:200px"><span v-for="i,idx1 in accounts" v-if="form.account_id == i.id">{{i.name}}</span></th>
    <th scope="col">客户签字</th>
    <th scope="col" style="width:200px">&nbsp;</th>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
    </div>
    <script>
    var vm = new Vue({
    	el:'#box',
    	data:{
    		settlements:[{
    			name:'现金',
    			value:1
    		},{
    			name:'会员卡',
    			value:2
    		},{
    			name:'赠送',
    			value:3
    		},{
    			name:'疗程卡',
    			value:4
    		},{
          name:'会员卡赠送',
          value: 10000
        }],
    		sn:"{$formData.sn}",
    		user:'',
    		user_id:{$formData.user_id},
    		room:'',
    		room_id:{$formData.room_id},

    		form:{
    			service_price:0,
    			product_price:0,
    			zong_price:0,
    			id:{$formData.id},
                account_id:{$formData.account_id},
                cashier_id:{$formData.cashier_id},
                finance_id:'',
                recharge:{:json_encode($recharge,true)},
                card_price:0,
                skin_text:'{$formData['skin_text']}',
                problem:'{$formData['problem']}',
                operate_detail:'{$formData['operate_detail']}',
                sug_goods:'{$formData['sug_goods']}',
    		},
    		users:{:json_encode($users)},
    		rooms:{:json_encode($rooms)},
    		tableData:[],
    		project_data:{:json_encode($project_data,true)},
        	advisers:{:json_encode($advisers)},
    		finances:{:json_encode($finances)},
    	    technicians:{:json_encode($technicians)},
    	    products:{:json_encode($products)},
    	    accounts:{:json_encode($accounts)},
    	    cashiers:{:json_encode($cashiers)},
    		warehouses:{:json_encode($warehouses)},
    	    buy_product:{:json_encode($buy_product,true)},
    	    productData:[],
    	    defaultProduct:[],
            cardData:[],
            cardList:[],
            cardDefault:[],
            date:'',
    	},
    	created(){
            var day2 = new Date();
            day2.setTime(day2.getTime());
            this.date = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();

    		console.log(this.buy_product);

    		this.defaultProduct = this.products[0]
    		for(var i = 0; i < this.users.length;i++){
    			if(this.user_id === this.users[i].id){
    				this.user = this.users[i].nick;
    			}
    		}
    		for(var i = 0; i < this.rooms.length;i++){
    			if(this.room_id === this.rooms[i].id){
    				this.room = this.rooms[i].name;
    			}
    		}
    		for(var i = 0; i< this.project_data.length;i++){
                for (var j = 0; j < this.advisers.length; j++) {
                    if(this.advisers[j]['id'] == Number(this.project_data[i].adviser_id)){
                        var adv = this.advisers[j]['nick'];
                    }
                }
                var tec = '';
                for (var j = 0; j < this.technicians.length; j++) {
                    if(this.project_data[i].technician_ids.map(x => Number(x)).includes(this.technicians[j]['id'])){
                        tec += this.technicians[j]['nick'] + '、';
                    }
                }
                for (var j = 0; j < this.settlements.length; j++) {
                    if(this.settlements[j]['value'] == Number(this.project_data[i].settlement)){
                        var settlement = this.settlements[j]['name'];
                    }
                }
                this.tableData.push({
                    project_id:Number(this.project_data[i].project_id),
                    project_name:this.project_data[i].project_name,
                    price: this.project_data[i].price,
                    num: this.project_data[i].num,
                    is_give: Number(this.project_data[i].is_give),
                    settlement: settlement,
                    type: this.project_data[i].type,
                    shougong: this.project_data[i].shougong,
                    bak: this.project_data[i].bak,
                    adviser_id: adv,
                    technician_ids: tec,
                })
            }
            for(var i = 0; i< this.buy_product.length;i++){
                for (var j = 0; j < this.advisers.length; j++) {
                    if(this.advisers[j]['id'] == Number(this.buy_product[i].adviser_id)){
                        var adv = this.advisers[j]['nick'];
                    }
                }
                var tec1 = '';
                for (var j = 0; j < this.technicians.length; j++) {
                    if(this.buy_product[i].technician_ids.map(x => Number(x)).includes(this.technicians[j]['id'])){
                        tec1 += this.technicians[j]['nick'] + '、';
                    }
                }
                for (var j = 0; j < this.settlements.length; j++) {
                    if(this.settlements[j]['value'] == Number(this.buy_product[i].settlement)){
                        var settlement = this.settlements[j]['name'];
                    }
                }
                this.productData.push({
                    "product_id" : this.buy_product[i].product_id,
                    "name" : this.buy_product[i].name,
                    "price2" : Number(this.buy_product[i].price2),
                    "num" : Number(this.buy_product[i].num),
                    "is_deposit" : Number(this.buy_product[i].is_deposit),
                    "adviser_id" : adv,
                    "technician_ids" :tec1,
                    "settlement" : settlement,
                    "warehouse_id" : Number(this.buy_product[i].warehouse_id),
                    "bak" : this.buy_product[i].bak,
                });
            }
            var cardList = [];
            cardList = {:json_decode(json_encode($formData.card_data),true)};
            console.log(cardList)
            for (var i = 0; i < cardList.length; i++) {
                for (var j = 0; j < this.advisers.length; j++) {
                    if(this.advisers[j]['id'] == Number(cardList[i].adviser_id)){
                        var adv = this.advisers[j]['nick'];
                    }
                }
                var tec2 = '';
                for (var j = 0; j < this.technicians.length; j++) {
                    if(cardList[i].technician_ids.map(x => Number(x)).includes(this.technicians[j]['id'])){
                        tec2 += this.technicians[j]['nick'] + '、';
                    }
                }
                for (var j = 0; j < this.settlements.length; j++) {
                    if(this.settlements[j]['value'] == Number(cardList[i].settlement)){
                        var settlement = this.settlements[j]['name'];
                    }
                }
                this.cardData.push({
                    "id" : cardList[i].id,
                    "name" : cardList[i].name,
                    "price" : Number(cardList[i].price),
                    "adviser_id" : adv,
                    "technician_ids" :tec2,
                    "settlement" : settlement,
                    "bak" : cardList[i].bak,
                });
            }
            // this.cardData = cardList;
            // this.cardDefault = cardList[0];
    	},

    	methods:{
    		onSubmit:function(status){
    			// console.log(this.form)
    			// console.log(this.tableData)
    			// console.log(this.productData)
    			var params = {
            id:this.form.id,
            status:status,
            finance_id:this.form.finance_id
          };
    			var that = this;

    			axios.post('{:url('')}', params).then(function (response) {
                    if(response.data.status === true){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        that.$message({
                            type: 'success',
                            message: response.data.message,
                            onClose: function(){
                                parent.layer.close(index); //再执行关闭
                                window.parent.location.reload();
                            }
                        })
                    }else{
                        that.$message({
                            type: 'error',
                            message: response.data.message
                        })
                    }
                }).catch(function (error) {
                    that.$message({
                            type: 'error',
                            message: error
                        })
                });
    		},
    		addPro:function(){
    			this.productData.push({
    				product_id:Number(this.defaultProduct.id),
    				name:this.defaultProduct.name,
    				price2: this.defaultProduct.price2,
    				num:1,
    				is_deposit:1,
    			});
    		},
    		removeItem:function(idx){
    			this.productData.splice(idx,1);
    		},
    		setProduct_price(item, num) {
                item.price = (((item.price||0)  / (item.old_number||1)) * num).toFixed(2)
                item.old_number = num
            },
            setProduct_price2(item, num) {
            	// console.log(num)
                item.price2 = (((item.price2||0)  / (item.old_number2||1)) * num).toFixed(2)
                item.old_number2 = num
            },
            proSelect:function(idx){
    			var that = this;
    		    let row = that.products.filter(function(p){
    			     return p.id === that.productData[idx].product_id;
    			 })[0]
    	        Object.keys(row).map(key => {

    	          if (key !== 'product_id') {
    	            that.$set(that.productData[idx], key, row[key])
    	          }
    	        })

    		},
    	},

    	watch:{
    		form:{
    			handler:function(){
    				// this.form.zong_price = this.form.service_price + this.form.product_price;
                    this.form.zong_price = this.form.service_price + this.form.product_price + Number(this.form.recharge.price) + this.form.card_price;
    			},
    			deep:true
    		},
    		tableData:{
    			handler:function(){
    	            var sum = 0
    		          this.tableData.map(i => {
    		            sum +=  Number(i.price)
    		          })
    		          this.form.service_price =  Number.isNaN(sum) ? 0 : sum
    	        },
    	        deep:true//对象内部的属性监听，也叫深度监听
    		},
    		productData:{
    			handler:function(){
    	            var sum = 0
    		          this.productData.map(i => {
    		            sum +=  Number(i.price2)
    		          })
    		          this.form.product_price =  Number.isNaN(sum) ? 0 : sum
    	        },
    	        deep:true//对象内部的属性监听，也叫深度监听
    		},
            cardData:{
              handler:function(){
                      var sum = 0
                      this.cardData.map(i => {
                        sum +=  Number(i.price)
                      })
                      this.form.card_price =  Number.isNaN(sum) ? 0 : sum
                  },
                  deep:true//对象内部的属性监听，也叫深度监听
            }
    	},
    })

    </script>

</body>
</html>
